<template>
    <div>
        <div class="row mb-1">
            <div class="col">
                <el-button @click="start" type="primary">查询</el-button>
                <el-button @click="dialogVisible = true" type="primary">添加</el-button>
            </div>
        </div>
        <el-table class="margin-top20" :data="tableData" height="73vh" style="width: 100%" @sort-change="sortchange">
            <el-table-column prop="ID" sortable="custom" label="ID"></el-table-column>
            <el-table-column prop="userid" label="用户ID"></el-table-column>
            <el-table-column prop="user.name" label="名称"></el-table-column>
            <el-table-column prop="createdAt" sortable="custom" :formatter="({ createdAt }) => formatter(createdAt)"
                label="创建时间">
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template #default="scope">
                    <el-button type="danger" @click="del(scope.row)" size="default">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination class="pager" @current-change="handleCurrentChange" :page-size="Number(limit)"
            layout="total, prev, pager, next" :total="count">
        </el-pagination>

        <el-dialog :title="title" v-model="dialogVisible" width="650">
            <template #header>
                <span class="icon-text el-dialog__header-title">
                    <el-icon class="text-primary">
                        <Guide />
                    </el-icon>
                    {{ title }}
                </span>
            </template>
            <el-form size="default" :model="ruleForm" label-width="100px" class="demo-ruleForm">
                <el-form-item label="选择用户">
                    <el-avatar :size="48" :src="circleUrl" @click="dialogVisible2 = true"></el-avatar>
                    <br />
                    <span>{{ username }}</span>
                </el-form-item>
                <div class="row">
                    <div class="col text-right">
                        <el-button @click="dialogVisible = false">取 消</el-button>
                        <el-button type="primary" @click="submit">确 定</el-button>
                    </div>
                </div>
            </el-form>
            <el-dialog width="80vw" title="" v-model="dialogVisible2">
                <template #header>
                    <span class="icon-text el-dialog__header-title">
                        <el-icon class="text-primary">
                            <Guide />
                        </el-icon>
                        选择用户
                    </span>
                </template>
                <User :userhandleCurrentChange="userhandleCurrentChange" :tablekey="selectarr"></User>
            </el-dialog>
        </el-dialog>
    </div>
</template>
<script setup lang="ts">
import { ElMessage, ElMessageBox } from "element-plus";
import { computed, onMounted, reactive, ref, toRefs } from "vue";
import {
    asyncdeluservip,
    asyncselectuservip,
    asyncselectviplist,
    asyncupdateuservip,
} from "../../../api/index";
import { toLocaleDateString } from "../../../util/time";

import { assign } from "lodash-es";
import Studycodemodel from "../../../mysql_interface/studycodemodel";
import User from "../User/index.vue";
const userinfo = reactive<Studycodemodel.Iuser>({});
function userhandleCurrentChange(data: Studycodemodel.Iuser) {
    Object.assign(userinfo, toRefs(data));
    ruleForm.value.userid = data.ID
    dialogVisible2.value = false;
}

const selectarr: Array<keyof Studycodemodel.Iuser> = ["name", "ID"];

const dialogVisible2 = ref(false);

const dialogVisible = ref(false);
const limit = ref(20);
const offset = ref(0);
const like = ref("");
const title = ref("添加");
const _sortable = ref("DESC");
const _order = ref("ID");
const ruleForm = ref<Studycodemodel.Iuservip>(assign({ viplistid: 1, vipauthorityid: 1 }))
const tableData = ref<Studycodemodel.Iuservip[]>([]);
const count = ref(0)

const viplist = ref<Studycodemodel.Iviplist[]>([])

onMounted(() => {
    start()
})
const circleUrl = computed(() => {
    if (userinfo.headportrait) return userinfo.headportrait;
    return "";
});
const username = computed(() => {
    return userinfo.name
});

async function start() {
    const list = await asyncselectviplist({ _limit: 10000 })
    viplist.value = list.rows
    try {
        let z: [keyof Studycodemodel.Iuservip, any] | undefined;
        const data = await asyncselectuservip({
            _limit: limit.value,
            _offset: offset.value,
            _sortable: _sortable.value,
            _order: _order.value
        });
        tableData.value = data.rows;
        count.value = data.count;
    } catch (e: any) {
        ElMessage.error(e);
    }
}
function handleCurrentChange(val: number) {
    offset.value = limit.value * (val - 1);
}
function formatter(updatedAt: string) {
    return toLocaleDateString(updatedAt);
}

// 排序
function sortchange(row: { column: any, prop: string, order: 'ascending' | 'descending' | null }) {
    const { prop, order } = row;
    if (order == "descending") {
        _sortable.value = "DESC";
    } else {
        _sortable.value = "ASC";
    }
    _order.value = prop;
    start()
}

async function submit() {
    try {
        await asyncupdateuservip(ruleForm.value);
        ElMessage({
            message: "添加成功",
            type: "success",
        });
        start();
        dialogVisible.value = false;
    } catch (e: any) {
        ElMessage({
            message: e,
            type: "error",
        });
    }
}

async function del(row: Studycodemodel.Iuservip) {
    ElMessageBox.confirm("确定要删除次标签", "Warning", {
        confirmButtonText: "OK",
        cancelButtonText: "Cancel",
        type: "warning",
    })
        .then(async () => {
            try {
                await asyncdeluservip(row);
                ElMessage({
                    message: "删除成功",
                    type: "success",
                });
                start();
            } catch (e) {
                ElMessage({
                    message: String(e),
                    type: "error",
                });
            }
        })
        .catch(() => {
            ElMessage({
                type: "info",
                message: "已取消",
            });
        });

}

</script>